<template>
  <div v-loading="loading" class="app-container">
    <div class="head-container">
      <el-select v-model="channelId" placeholder="选择渠道" clearable size="mini" style="width: 200px" @change="changeChannel">
        <el-option v-for="channelObj in channelOptions" :key="channelObj.channelId" :label="channelObj.channelName" :value="channelObj.channelId" />
      </el-select>
      <el-button v-if="channelId && channelId !== '12'" size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" round @click="doSyncChannleData">立即同步</el-button>
      <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" round @click="collapseAll">全收起</el-button>
      <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" round @click="expandAll">全展开</el-button>
    </div>
    <div style="padding-top:5px">
      <el-container style="background-color: white; border: 1px solid">
        <el-aside style="background-color: white">
          <div>
            <el-tree ref="categoryTree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
          </div>
        </el-aside>
        <el-main v-if="channelId === '-02'">
          <el-table ref="dataTab" :data="data" stripe size="small" border style="width: 100%;" @header-dragend="colChange">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div v-if="scope.row.col2 !== '文本'">
                  <span>属性可选值：</span>
                  <el-tag>选项1</el-tag>
                  <el-tag>选项2</el-tag>
                  <el-tag>选项3</el-tag>
                  <el-tag>选项4</el-tag>
                  <el-tag>选项5</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" sortable="custom" label="属性名称" prop="attributeName" />
            <el-table-column :show-overflow-tooltip="true" sortable="custom" label="是否必填" prop="col1" />
            <el-table-column :show-overflow-tooltip="true" sortable="custom" label="编辑类型" prop="col2" />
            <el-table-column :show-overflow-tooltip="true" sortable="custom" label="是否销售属性" prop="col3" />
            <el-table-column :show-overflow-tooltip="true" sortable="custom" label="是否颜色属性" prop="col4" />
            <el-table-column :show-overflow-tooltip="true" sortable="custom" label="是否尺码属性" prop="col5" />
            <el-table-column :show-overflow-tooltip="true" sortable="custom" label="是否下沉属性" prop="col6" />
          </el-table>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import { getChannelOptions, queryChannelTreeList, getAttributeList, syncChannleData } from '@/api/coi/category/category'
import { messageShowTool } from '@/utils/messageUtil'

export default {
  data() {
    return {
      loading: false,
      data: [],
      channelId: null,
      channelOptions: [],
      defaultProps: { children: 'children', label: 'categoryName' },
      treeData: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.loading = true
      getChannelOptions().then(res => {
        this.channelOptions = res.result
        this.loading = false
      }, error => {
        console.log(error)
        this.loading = false
      })
    })
  },
  methods: {
    forArr(node, isExpand) {
      node.expanded = isExpand
      node.childNodes.forEach(childNode => {
        childNode.expanded = isExpand
        if (childNode.childNodes && childNode.childNodes.length > 0) {
          this.forArr(childNode, isExpand)
        }
      })
    },
    // 全展开
    expandAll() {
      const node = this.$refs.categoryTree.store.root
      this.forArr(node, true)
    },
    // 全收起
    collapseAll() {
      const node = this.$refs.categoryTree.store.root
      this.forArr(node, false)
    },
    changeChannel(channelId) {
      this.loading = true
      this.channelId = channelId
      queryChannelTreeList({ channelId: this.channelId }).then(res => {
        this.treeData = []
        if (res.result) {
          this.treeData = res.result
        }
        this.loading = false
      }, error => {
        console.log(error)
        this.loading = false
      })
    },
    handleNodeClick(obj) {
      if (!obj.children && this.channelId === '-02') {
        getAttributeList({ id: obj.id, channelId: this.channelId }).then(res => {
          this.data = res
          this.loading = false
        }, error => {
          console.log(error)
          this.loading = false
        })
      }
    },
    // 触发同步操作
    doSyncChannleData() {
      this.$confirm('确认触发当前所选渠道类目同步操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        syncChannleData(this.channelId).then(res => {
          messageShowTool('成功触发同步操作，稍后刷新页面查看结果。', 'success')
          this.loading = false
        }, error => {
          console.log(error)
          this.loading = false
        })
      })
    }
  }
}
</script>
